<template>
  <div>
    <div class="box">
        <h2> {{ item.pname }} </h2>
        <p> {{ item.info }} </p>
        <p>商品价格： <span>{{ item.price }}</span> </p>
        <button @click="$emit('kanyidiao', 1, item.id)">砍一刀</button>
    </div>
  </div>
</template>

<script>
export default {
    // props: ['item']
    props: {
        id: {
            required: true,  //要求父组件必须传id
            type: Number   //要求传过来的id必须是数字类型
        },
        pname: {
            default: '汉堡包',  //默认值 【如果默认值是数组或对象，要求写成函数，函数中返回数组或对象】
            type: String  //传过来的是字符串
        },
        price: Number, //要求是数字类型
        info: {
            required: true,
            type: [Number, String]  // 要求是数字或字符串
        }
    }
}
</script>

<style>
h1{
    width: 170px;
    background: #f2e0e0;
    border-radius: 30px 30px;
    border: #a6a1d9 solid 5px;
    padding-left: 20px;
    color: #fe7299;
    margin-left: 20px;
}
h2{
    color: orange;
}
p{
    color: #f8a6b1;
    font-size: 17px;
}
span{
    color: #d8e6cd;
}
.box{
    width: 500px;
    height: 190px;
    padding-left: 10px;
    margin: 20px;
    border: solid 5px #bcdaea;
    border-radius: 30px;
    background: #fcffda;
}
</style>